<template>
    <div class="main-categories-info" id="categories-info">
        <van-search v-model="keyword" placeholder="Search" />
        <van-tabs @click-tab="onChange" @rendered="onRendered" v-model:active="active">
            <van-tab v-for="(categorie, index) in categories" :key="index">
                <template #title>
                    <div class="name">{{categorie.categories_name}}</div>
                </template>
                <section>
                    <div class="warp">
                        <div class="waterfall" v-if="categories[active].items.length > 0">
                            <div class="goods-list" span="12"  v-for="(item, index) in categories[active].items" :key="index" >
                                <router-link :to="item.url" v-if="item.type === 'goods'">
                                    <div class="goods">
                                        <van-image
                                            class="img"
                                            round
                                            :src="item.goods_img"
                                        />
                                        <h3 class="goods_name">{{item.goods_name}}</h3>
                                        <div class="goods_attr">{{item.goods_attr}}</div>
                                        <div class="goods_sku">
                                            <van-row justify="space-between" align="center">
                                                <van-col>
                                                    <span class="goods_price">$ {{item.goods_price}}</span>
                                                </van-col>
                                                <van-col>
                                                    <div class="goods_add"><van-icon name="add" color="#3AA24C" size="30px" /></div>
                                                </van-col>
                                            </van-row>
                                        </div>
                                    </div>
                                </router-link>
                                <router-link :to="item.url" v-else>
                                    <van-image
                                        class="img"
                                        :src="item.ad_img"
                                    />
                                </router-link>
                            </div>
                        </div>
                        <van-empty image="search" description="NO DATA" v-else />
                    </div>
                </section>
            </van-tab>
        </van-tabs>
    </div>
</template>

<script lang="ts" setup>
import { ref, watch, reactive, inject, onMounted, computed  } from 'vue'
import { RouteParams, useRoute, useRouter } from 'vue-router'
import product1 from '../../assets/product-1.png'
import product2 from '../../assets/product-2.png'
import product3 from '../../assets/product-3.png'
import adImg from '../../assets/ad.png'

interface Goods {goods_img?: string, goods_name?: string, goods_attr?: string, goods_price?: string, type: string, ad_img?: any, url: any
} 

const route = useRoute()
const router = useRouter()

const keyword = ref('')

const SetTitle: any = inject('SetTitle')

const active =  ref(0)

const items: Array<Goods> = reactive([
    {
        type: 'goods',
        goods_img: product2,
        goods_name: 'Red Apple',
        goods_attr: '1kg,priceg',
        goods_price: '4,99',
        url: {
            name: 'GoodsInfo',
            query: {
                gid: 1
            }
        }
    },  {
        type: 'ad',
        ad_img: adImg,
        url: {
            path: ''
        }
    },  {
        type: 'goods',
        goods_img: product3,
        goods_name: 'Orginal Banana',
        goods_attr: '1kg,priceg',
        goods_price: '5,99',
        url: {
            name: 'GoodsInfo',
            query: {
                gid: 1
            }
        }
    },  {
        type: 'goods',
        goods_img: product2,
        goods_name: 'Red Apple',
        goods_attr: '1kg,priceg',
        goods_price: '4,99',
        url: {
            name: 'GoodsInfo',
            query: {
                gid: 1
            }
        }
    },  {
        type: 'goods',
        goods_img: product2,
        goods_name: 'Red Apple',
        goods_attr: '1kg,priceg',
        goods_price: '4,99',
        url: {
            name: 'GoodsInfo',
            query: {
                gid: 1
            }
        }
    },  {
        type: 'goods',
        goods_img: product2,
        goods_name: 'Red Apple',
        goods_attr: '1kg,priceg',
        goods_price: '4,99',
        url: {
            name: 'GoodsInfo',
            query: {
                gid: 1
            }
        }
    },  {
        type: 'goods',
        goods_img: product2,
        goods_name: 'Red Apple',
        goods_attr: '1kg,priceg',
        goods_price: '4,99',
        url: {
            name: 'GoodsInfo',
            query: {
                gid: 1
            }
        }
    },  {
        type: 'goods',
        goods_img: product2,
        goods_name: 'Red Apple',
        goods_attr: '1kg,priceg',
        goods_price: '4,99',
        url: {
            name: 'GoodsInfo',
            query: {
                gid: 1
            }
        }
    },  {
        type: 'goods',
        goods_img: product2,
        goods_name: 'Red Apple',
        goods_attr: '1kg,priceg',
        goods_price: '4,99',
        url: {
            name: 'GoodsInfo',
            query: {
                gid: 1
            }
        }
    },  {
        type: 'goods',
        goods_img: product2,
        goods_name: 'Red Apple',
        goods_attr: '1kg,priceg',
        goods_price: '4,99',
        url: {
            name: 'GoodsInfo',
            query: {
                gid: 1
            }
        }
    }
])


const categories: Array<{categories_img: string, categories_name: string, cid: number, items: Array<Goods> }>= reactive([
    {
        categories_img: product1,
        categories_name: 'Fruitsr',
        cid: 1,
        items: []
    },  {
        categories_img: product1,
        categories_name: 'Vegtables',
        cid: 2,
        items: items
    },  {
        categories_img: product1,
        categories_name: 'Meat',
        cid: 3,
        items: []
    },  {
        categories_img: product1,
        categories_name: 'Fish',
        cid: 4,
        items: []
    },  {
        categories_img: product1,
        categories_name: 'Fruits',
        cid: 5,
        items: []
    },  {
        categories_img: product1,
        categories_name: 'Fruits',
        cid: 6,
        items: []
    },  {
        categories_img: product1,
        categories_name: 'Fruits',
        cid: 7,
        items: []
    },  {
        categories_img: product1,
        categories_name: 'Fruits',
        cid: 8,
        items: []
    },  {
        categories_img: product1,
        categories_name: 'Fruits',
        cid: 9,
        items: []
    },  {
        categories_img: product1,
        categories_name: 'Fruits',
        cid: 10,
        items: []
    },  {
        categories_img: product1,
        categories_name: 'Fruits',
        cid: 11,
        items: []
    }
])

const onChange = () => {
    setTabsLineWidth()
}

const onRendered = () => {
    setTabsLineWidth()
}

const setTabsLineWidth = () => {
    setTimeout(() => {
        const width: any = (document.querySelector('#categories-info') as any).querySelector('.van-tab--active').offsetWidth;
        (document.querySelector('#categories-info') as any).querySelector('.van-tabs__line').style.width = `${width}px`
    }, 300)
}

const setActive = () => {
    const index = categories.findIndex((v: any)=>{
                        return v.cid == route.query.cid
                    })
    SetTitle(categories[index].categories_name)
    active.value = index
}

watch([active], () => {
    SetTitle(categories[active.value].categories_name)
})

onMounted(()=>{
    if(!route.query.cid) {
        router.replace({name: 'ShopIndex'})
    }
    setActive()
})

</script>

<style lang="less" scoped>
.main-categories-info {
    :deep(.van-tabs) {
        .van-tabs__nav {
            padding: 0px;
            .van-tabs__line {
                bottom: 0px;
            }
        }
    }
    .name {
        font-size: 20px;
        line-height: 24px;
        text-transform: capitalize;
        color: #804F1E;
    }
    section {
        .warp {
            margin: 20px 12px;
            .waterfall {
                margin: 5px 0px;
                column-count: 2;
                column-gap: 12px;
                .goods-list {
                    overflow: hidden;
                    margin-top: 12px;
                    display: inline-block;
                    background: #FFFFFF;
                    box-shadow: 0px 0px 13px #C4C4C4;
                    border-radius: 20px;
                    .goods {
                        display: flex;
                        flex: 1;
                        flex-direction: column;
                        justify-items: center;
                        align-items: center;
                        padding: 10px;
                        .img {
                            width: 50%;
                            margin: 15px 0px;
                        }
                        .goods_name {
                            width: 100%;
                            font-size: 15px;
                            line-height: 18px;
                            color: #6D3805;
                            padding: 0px;
                            margin: 10px 0px 0px 0px;
                        }
                        .goods_attr {
                            width: 100%;
                            font-size: 12px;
                            line-height: 14px;
                            color: #929292;
                            margin-top: 5px;
                        }
                        .goods_sku {
                            width: 100%;
                            margin-top: 5px;
                            .goods_price {
                                font-family: Klarna Headline;
                                font-weight: bold;
                                font-size: 20px;
                                line-height: 24px;
                                color: #FF5E00;
                            }
                            .goods_add {
                                display: flex;
                                justify-content: center;
                                align-items: center;
                            }
                        }
                    }
                }
            }

        }
    }
}
</style>
